<template>
  <view class="content">
    <view style="display: flex; align-content: center;">
      <view class="left"><img :src="zUrl" style="width: 100%; height:100%" alt="" @click="uploadHandle('zheng')"></view>
      <view class="right"><img :src="fUrl" style="width: 100%; height:100%" alt="" @click="uploadHandle('fan')"></view>
    </view>
    <view style="display: flex; align-content: center;">
      <view class="left"><img :src="zkz" style="width: 100%; height:100%" alt="" @click="uploadHandle('zkz')"></view>
      <view class="left"><img :src="lq" style="width: 100%; height:100%" alt="" @click="uploadHandle('lq')"></view>
    </view>

    <input class="m-input" type="text" placeholder="请输入姓名">
    <input class="m-input" type="text" placeholder="请输入身份证号">
    <input class="m-input"  type="text" placeholder="请输入准考证号">

    如有上传错误，请重新选择图片

    <van-button type="info" block @click="addHandle">增加</van-button>
  </view>
</template>

<script setup>
import {ref} from 'vue'

const zUrl = ref("./../../static/zheng.png")
const fUrl = ref("./../../static/fan.png")

const zkz = ref("./../../static/fan.png")
const lq = ref("./../../static/fan.png")


//上传照片
const uploadHandle = (type) => {
  uni.chooseImage({
    success: (chooseImageRes) => {
      const tempFilePaths = chooseImageRes.tempFilePaths;
      uni.uploadFile({
        url: 'http://localhost:9999/sys/common/upload', //仅为示例，非真实的接口地址
        filePath: tempFilePaths[0],
        name: 'file',
        formData: {
          'user': 'test'
        },
        header: {
          "X-Access-Token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NzkxMjQxMzQsInVzZXJuYW1lIjoiYWRtaW4ifQ.a-2D7N02KDehwGydtnof66-r8aE4c_WFFKtqL65gfDU"
        },
        success: (uploadFileRes) => {
          console.log(chooseImageRes.tempFilePaths)
          if(type === "zheng") {
            zUrl.value = "http://localhost:9999/sys/common/static/" + JSON.parse(uploadFileRes.data).message
          }
          if(type === "fan") {
            fUrl.value = "http://localhost:9999/sys/common/static/" + JSON.parse(uploadFileRes.data).message
          }
          if(type === "zkz") {
            zkz.value = "http://localhost:9999/sys/common/static/" + JSON.parse(uploadFileRes.data).message
          }
          if(type === "lq") {
            lq.value = "http://localhost:9999/sys/common/static/" + JSON.parse(uploadFileRes.data).message
          }
          console.log(JSON.parse(uploadFileRes.data));
        }
      });
    }
  });
}


const addHandle = () => {
  const params = {
    admissionNotice: lq.value,
    idCard:zUrl.value,
    idCardNum:"10101",
    name:"1010",
    pass:zkz.value,
    passNum:"1"
  }
  uni.request({
    url: "http://localhost:9999/qualification/bmQualification/add",
    method: "POST",
    dataType: "application/json;charset=UTF-8",
    data: params,
    header: {
      "X-Access-Token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2NzkxMjQxMzQsInVzZXJuYW1lIjoiYWRtaW4ifQ.a-2D7N02KDehwGydtnof66-r8aE4c_WFFKtqL65gfDU"
    },
    success:(res) => {
      console.log(res)
    }
  })
}

const afterRead = (file) => {
  // 此时可以自行将文件上传至服务器
  console.log(file);
  const formData= new FormData()
  formData.append("file", formData)
  // uni.request({
  //   method: "POST",
  //
  // })
  uni.uploadFile({
    url: 'http://localhost:9999/sys/common/upload', //仅为示例，非真实的接口地址
    filePath: file.url,
    name: 'file',
    success: (uploadFileRes) => {
      console.log(uploadFileRes.data);
    },fail:(err) => {
    console.log(err)
    debugger
  }
  });
};
</script>

<style>

.left, .right {
  flex: 1;
  border: 1px solid #ccc;
  margin: 20rpx;
  height: 200rpx;
}

.left1{
  flex: 1;
  border: 1px solid #ccc;
  margin: 20rpx;
  height: 300rpx;
}
img {
  width: 230px;
  height: 100px;
}
.content {

}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.m-input {
  width: 300px;
  height: 30px;
  border: 1px solid #cccccc;
  margin-top: 10px;
  margin: auto;
}
</style>
